<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>有害气体信息</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>有害气体信息</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-card-body">
        <!--数据表格-->
        <table id="gasList" lay-filter="gasTable"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo"></script>
<!--行工具事件-->

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    //数据表格
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#gasList',
            url: '/record/list',//数据接口
            page: true,//开启分页
            toolbar:'#toolbarDemo',
            cols: [[ //表头
                {field: 'gasId', title: '气体编号', sort: true, fixed: 'left'}
                ,{field: 'gasName', title: '气体名称'}
                ,{field: 'gasContent', title: '气体含量上限', sort: true}
                ,{field: 'harm', title: '气体危险等级', sort: true}
                ,{field: 'features', title: '特性'}
                ,{field: 'source', title: '来源'}
                ,{field: 'measure', title: '应急措施'}
                ,{field: 'updateTime', title: '修改时间', sort: true}
            ]]
        });
        //工具条事件
        table.on('tool(gasTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do something
            } else if(layEvent === 'del'){ //删除
                layer.confirm('确定删除吗？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url:"/record/delete",
                        type:"POST",
                        data: {"userId:":data.id},
                        dataType:"JSON",
                        success:function (result){
                            layer.msg(result);
                        }
                    })
                });
            }  else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });
</script>
</body>
</html>